<template>
	<view class="page">
		
		<view class="weui-page__back">
			<view class="linear"></view>
		</view>
		
		<view class="qrcode">
			<image :src="imgMsg.poster" mode="widthFix" class="" @longpress="code" />
		</view>

		<view class="share-btn" >
			<view class="share-text" @click="onSave">长按保存二维码</view>
		</view>

		<uni-popup ref="popupPrivacy" type="center">
			<view style="width: 600rpx; margin: auto; background-color: white;padding: 40rpx; border-radius: 10rpx;">
				<view>在您使用“逆伶生物”服务之前，请仔细阅读<text @click="handleOpenPrivacyContract"
						style="color: blue;">《逆伶生物小程序隐私保护指引》</text>，如你同意该指引，请点击“同意”开始使用本小程序。</view>
				<view style="display: flex; flex-direction: row; margin-top: 40rpx;">
					<button  @click="exit"
						style="flex: 1;  height: 80rpx; line-height: 80rpx; background-color: red;color: white; border-top-right-radius: 0; border-bottom-right-radius: 0;">拒绝</button>
					<button
						style="flex: 1; margin-left: 5rpx; background-color: green; color: white; height: 80rpx; line-height: 80rpx;border-top-left-radius: 0; border-bottom-left-radius: 0;"
						id="agree-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" type="bottom">
			<view class="popupBigBox">
				<view class="pop-box">
					<view class="between align invite-box">
						<!--  #ifdef APP-PLUS -->
						<!-- 微信 -->
						<view class="invite-btn flex" @click="onShare('WXSceneSession')">
							<image src="https://wx.2024csnl.com/static/weixin.png"></image>
							<view>分享至微信</view>
						</view>
						<!-- 朋友圈 -->
						<view class="invite-btn flex" @click="onShare('WXSceneTimeline')">
							<image src="https://wx.2024csnl.com/static/pengyouquan.png"></image>
							<view>分享至朋友圈</view>
						</view>
						<!--  #endif -->
						<!-- 复制 -->
						<view class="invite-btn flex" @click="copyCode(imgMsg.poster)">
							<image src="https://wx.2024csnl.com/static/lianjie.png"></image>
							<view>复制链接</view>
						</view>
					</view>
				</view>
				<view class="cancelBtn" @click="close('popup')">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sharePoster
	} from "@/api/index.js"
	export default {
		data() {
			return {
				imgMsg: {},
				filePath: '',
			}
		},
		onLoad() {
			this.getSharePoster()
		},
		methods: {
			onSave() {
				var $that = this;
				//  #ifdef APP-PLUS | MP-WEIXIN
				uni.showLoading({
					title: '保存中...'
				});
				uni.downloadFile({
					url: `${this.imgMsg.poster}`,
					success: (res) => {
						if (res.statusCode === 200) {
							$that.filePath = res.tempFilePath;
							$that.openPrivacy();
						}
					}
				});
				// #endif
				// #ifdef H5 
				var oA = document.createElement("a");
				oA.download = '收款码'; // 设置下载的文件名，默认是'下载'
				oA.href = `${this.imgMsg.poster}`;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
				// #endif
			},
			saveImg() {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = `${this.imgMsg.poster}`;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			},
			exit() {
				uni.exitMiniProgram({
					success: function(res) {
			
					},
					fail: function(res) {
			
					},
					complete: function(res) {
			
					}
				})
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			async getSharePoster() {
				const res = await sharePoster('s=/ApiAgent/poster')
				const {
					data,
					status,
					msg
				} = res.data
				console.log(res, "res")
				if (status == 1) {
					this.imgMsg = data
				} else {
					this.showToast(msg)
				}
			},
			onShare(type) {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				// console.log(this.QRImg,"QRImg")
				uni.share({
					provider: "weixin",
					scene: type,
					type: 2,
					imageUrl: this.imgMsg.poster,
					success(res) {

						this.showToast('分享成功~')
						this.close('popup')
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 长按保存二维码
			code(url) {
				uni.downloadFile({
					url: this.imgMsg.poster,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！"
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			// 复制二维码链接
			copyCode(e) {
				uni.setClipboardData({
					data: e,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
						this.close('popup')
					}
				});
			},
			openPrivacy() {
				wx.getPrivacySetting({
					success: res => {
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							this.open('popupPrivacy')
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: this.filePath,
								success: () => {
									uni.hideLoading()
									uni.showToast({
										title: '保存成功~',
										icon: 'none'
									})
								},
								fail(err) {
									uni.hideLoading()
									uni.showToast({
										title: err,
										icon: 'none'
									})
								}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				})
			},
			handleAgreePrivacyAuthorization() {
				uni.saveImageToPhotosAlbum({
					filePath: this.filePath,
					success: () => {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功~',
							icon: 'none'
						})
					},
					fail(err) {
						uni.hideLoading()
						uni.showToast({
							title: err,
							icon: 'none'
						})
					}
				});
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			checkItem(i) {
				this.checkIndex = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #f8f8f8;
		.weui-page__back {
			.linear {
				height: 400rpx;
				background: -webkit-linear-gradient(top left, #263A29, #3E9E4D);
			}
		}
		.qrcode {
			position: relative;
			z-index: 1;
			padding: 40rpx 40rpx;
			image {
				display: block;
				width: 100%;
				border: 10rpx solid #fff;
				border-radius: 20rpx;
			}
		}
	}
	
	.popupBigBox {
		background-color: #FFF;
		border-radius: 40rpx 40rpx 0 0;

		.cancelBtn {
			border-top: 10rpx solid #F5F5F5;
			padding: 50rpx 0;
			text-align: center;
		}

		.pop-box {
			padding: 50rpx;
			height: 12vh;
			overflow-y: auto;
		}
	}



	.invite-box {

		.invite-btn {
			flex-direction: column;
			align-items: center;
			margin-right: 26rpx;
			color: #333333;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
		}
	}

	.share-btn {
		margin: 40rpx;
		.share-text {
			display: block;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 90rpx;
			background: #41644A;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.page-box {
		position: relative;

		.invitation-bg {
			width: 100%;
		}

		.qr-share-box {
			position: absolute;
			top: 22vh;
			left: 0;
			right: 0;
			margin: 0 auto;

			.qr-icon {
				width: 328rpx;
				height: 328rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 206rpx;
			}


		}
	}
</style>